/**
 * Created by Ysssssss on 21/1/19.
 */
import React, { PureComponent, useRef } from 'react'
import {connect} from "react-redux";
import { Button } from "antd";
import OpenShoppingMallSvg from '@assets/svg/openShoppingMall.svg'
import HomeEntranceDesignSvg from '@assets/svg/homeEntranceDesign.svg'
import HomeEntrancePaymentSvg from '@assets/svg/homeEntrancePayment.svg'
import HomeEntranceProductSvg from '@assets/svg/homeEntranceProduct.svg'
import HomeEntranceStoreSvg from '@assets/svg/homeEntranceStore.svg'
import HomeEntranceThirdpartySvg from '@assets/svg/homeEntranceThirdparty.svg'
import HomeEntranceWarehouseSvg from '@assets/svg/homeEntranceWarehouse.svg'
import {
    setHeaderButtonInfo
} from "@sagas/common";
import {withRouter} from "react-router";


@connect (
    (({user}) => ({
        permissionTag: user.permissionTag
    })),
    {
        setHeaderButtonInfo
    }
)
@withRouter
class Home extends PureComponent {
    constructor(props) {
        super(props);
        this.openShopMall = this.openShopMall.bind(this)
    }

    openShopMall (e) {
        e.preventDefault();
        e.stopPropagation();
        const { history } = this.props
        history.push('/shopping-mall/open')
    }

    entranceRedirect (url) {
        const { history } = this.props
        history.push(url)
    }

    render() {
        const { permissionTag } = this.props
        const { bizType, isAdmin, isBrand } = permissionTag
        return (
            <div className="bilin-home-page">
                { bizType === null ? (
                    <div className="home-shopping-open">
                        <div className="flex-center">
                            <OpenShoppingMallSvg className="mgr-16" style={{width: 50, height: 50}}/>
                            <div className='mgl-16'>
                                <div className="ft-20 ft-clr-d ft-w600">您还未开通商城~</div>
                                <div className="ft-14 mgt-8 ft-clr-ml">在线卖货、开展营销、促成交易，让你的品牌在互联网上疯传</div>
                            </div>
                        </div>
                        { isBrand && isAdmin ? (
                            <Button type="primary" ghost onClick={this.openShopMall} className="open-button">立即开通</Button>
                        ) : (
                            <Tooltip title="等待品牌管理员开通商城">
                                <Button type="primary" ghost disabled onClick={this.openShopMall} className="open-button">立即开通</Button>
                            </Tooltip>
                        ) }
                    </div>
                ) : (
                    <div className="guide-entrance-container">
                        { isBrand && isAdmin && bizType !== 'self' ? (
                            <div className="guide-entrance flex-row-between">
                                <div className="flex-vertical-center">
                                    <HomeEntranceStoreSvg className="entrance-svg"/>
                                    <div className="flex-vertical-center">
                                        <div className="ft-14 ft-clr-d w-100">店铺入驻</div>
                                        <div className="ft-12 ft-clr-ml">为每个经销商创建店铺，设置其为店铺超管 ，引导其完成初始化配置</div>
                                    </div>
                                </div>
                                <div className="flex-vertical-center">
                                    <div className="clr-green cur-poi"
                                         onClick={this.entranceRedirect.bind(this, '/store-list')}
                                    >前往店铺</div>
                                </div>
                            </div>
                        ) : null }
                        <div className="guide-entrance flex-row-between">
                            <div className="flex-vertical-center">
                                <HomeEntranceProductSvg className="entrance-svg"/>
                                <div className="flex-vertical-center">
                                    <div className="ft-14 ft-clr-d w-100">商品供应</div>
                                    <div className="ft-12 ft-clr-ml">前往“商品库”，选择新建或批量导入商品，然后前往“商品库-供货中心”为特定经销商供货，亦可上架商品至品牌自营货架</div>
                                </div>
                            </div>
                            <div className="flex-vertical-center">
                                <div className="clr-green cur-poi"
                                     onClick={this.entranceRedirect.bind(this, '/product-center/type')}
                                >前往商品库</div>
                                <div className="clr-green cur-poi mgl-24"
                                     onClick={this.entranceRedirect.bind(this, '/shopping-mall/product')}
                                >前往上架</div>
                            </div>
                        </div>
                        <div className="guide-entrance flex-row-between">
                            <div className="flex-vertical-center">
                                <HomeEntranceWarehouseSvg className="entrance-svg"/>
                                <div className="flex-vertical-center">
                                    <div className="ft-14 ft-clr-d w-100">仓库开通</div>
                                    <div className="ft-12 ft-clr-ml">创建仓库，设置配送，并对商品进行库存管理</div>
                                </div>
                            </div>
                            <div className="flex-vertical-center">
                                <div className="clr-green cur-poi"
                                     onClick={this.entranceRedirect.bind(this, '/warehouse/manage')}
                                >前往仓库</div>
                            </div>
                        </div>
                        { isAdmin ? (
                            <div className="guide-entrance flex-row-between">
                                <div className="flex-vertical-center">
                                    <HomeEntrancePaymentSvg className="entrance-svg"/>
                                    <div className="flex-vertical-center">
                                        <div className="ft-14 ft-clr-d w-100">收款配置</div>
                                        <div className="ft-12 ft-clr-ml">为品牌或店铺的订单配置收款账号，资金可及时到账</div>
                                    </div>
                                </div>
                                <div className="flex-vertical-center">
                                    <div className="clr-green cur-poi"
                                         onClick={this.entranceRedirect.bind(this, '/payment')}
                                    >前往收款</div>
                                </div>
                            </div>
                        ) : null }
                        <div className="guide-entrance flex-row-between">
                            <div className="flex-vertical-center">
                                <HomeEntranceDesignSvg className="entrance-svg"/>
                                <div className="flex-vertical-center">
                                    <div className="ft-14 ft-clr-d w-100">商城装修</div>
                                    <div className="ft-12 ft-clr-ml">选择合适风格，装修商城，提升颜值，人流不断</div>
                                </div>
                            </div>
                            <div className="flex-vertical-center">
                                <div className="clr-green cur-poi"
                                     onClick={this.entranceRedirect.bind(this, '/shopping-mall/design')}
                                >前往装修</div>
                            </div>
                        </div>
                        { isBrand ? (
                            <div className="guide-entrance flex-row-between">
                                <div className="flex-vertical-center">
                                    <HomeEntranceThirdpartySvg className="entrance-svg"/>
                                    <div className="flex-vertical-center">
                                        <div className="ft-14 ft-clr-d w-100">授权体验</div>
                                        <div className="ft-12 ft-clr-ml">选择微信、支付宝、抖音小程序进行授权，即可体验你的商城</div>
                                    </div>
                                </div>
                                <div className="flex-vertical-center">
                                    <div className="clr-green cur-poi"
                                         onClick={this.entranceRedirect.bind(this, '/third-party/wechat')}
                                    >前往授权</div>
                                </div>
                            </div>
                        ) : null }
                    </div>
                ) }
            </div>
        )
    }
}

export default Home